<template>
	<view :class="['page',{'iphoneX':isIphoneX}]"> 
		<c-header bgColor="#ffffff">
			<view class="header" slot="header"> 
				<navigator open-type="navigateBack" :delta="1" hover-class="none" class="t-btn back-btn iconfont f-wb">&#xe63b;</navigator>
				<view class="title">项目列表</view>
				<navigator url="/package_keyan/add/add?type=add" hover-class="none" class="add-btn" style="right:10px;">添加项目</navigator> 
			</view>
		</c-header> 
		<view class="h45">
			<view class="fix-wrap">
				<view class="search-area">
					<view class="search-form">
						<view class="icon iconfont f-s44">&#xe622;</view>
						<input type="text" v-model="params.keyword" class="sc-inp" @confirm="search">
						<view v-if="params.keyword" class="clear-btn iconfont f-s44" @click="clearKeyword">&#xe724;</view>
					</view>  
				</view> 			 
			</view>
		</view>
		<view v-if="isLogin" class="body">
			<c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading>
			
			<template v-else>				 
				
				<template >
				 
				
				<view  v-if="list.length>0" class="project-list">
					<!-- 超级管理员 -->
					<template>
						<view class="item m-b2" v-for="(item,index) in list" :key="index">
							<navigator :url="'/package_keyan/add/add?type=detail&id='+item.id" hover-class="none"  class="hd">
								<view class="title">
									<view class="name f-s28">{{item.name}}</view>  
								</view>
								<view class="date">{{item.create_time}}</view>
							</navigator> 
							 
							<view class="bottom">
								<view class="left">	</view>
								<view class="right">							 
									<view class="btn red" @click="del(item.id)">删除</view>
									<navigator :url="'/package_keyan/add/add?type=edit&id='+item.id" hover-class="none" class="btn orange" >修改</navigator>									 
								</view>
							</view> 
						</view>
						
					</template>
					
					<c-loading :loadingState="loadingState"></c-loading>
				</view>
				
				<c-empty v-else></c-empty>
				</template>
			</template>
			 
		</view>
		
		<view v-if="flag.isFullPage" class="full-fix-page">
			<!-- 申请延期 -->
			<view v-if="flag.isSetDate" class="popup-wrap a-fadein">
				<view class="popup-type-model">
					<view class="close-btn iconfont f-s44" @click="showPopup('hide')">&#xeb6a;</view>
					<view class="popup-body">
						<view class="title">申请延期</view>
						<view class="content">  
							<u--form :model="params" ref="uForm" class="form-wrap">
								<u-form-item label="延期日期" labelWidth="160" prop="name" borderBottom="true" class="u-form-item" @click="flag.isShowDate=true"> 
									<u-input v-model="params.lag_time" placeholder="选择延期日期" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
									<u-icon	slot="right" name="arrow-right"></u-icon>		 
								</u-form-item> 					 				
							</u--form> 
							<u-button type="primary" size="mini" :hairline="true" text="确定" style="height: 70rpx;font-size: 30rpx;" @click="submit"></u-button>
						</view>
					</view>
				</view>
			</view>  
			
			<!-- 拒绝 -->
			<view v-if="flag.isDisagree" class="popup-wrap a-fadein">
				<view class="popup-type-model">
					<view class="close-btn iconfont f-s44" @click="showPopup('hide')">&#xeb6a;</view>
					<view class="popup-body">
						<view class="title">拒绝</view>
						<view class="content">  
							<u--form :model="params" ref="uForm" class="form-wrap">
								 
								<u-form-item label="拒绝原因" labelWidth="160" prop="name" borderBottom="true" class="u-form-item">
									<u-input v-model="params.opt_remark" placeholder="输入拒绝原因" /> 	 
								</u-form-item>								
							</u--form> 
							<u-button type="primary" size="mini" :hairline="true" text="确定" style="height: 70rpx;font-size: 30rpx;" @click="confirmOrder(3,currentIndex,3)"></u-button>
						</view>
					</view>
				</view>
			</view>  
		</view>
		
		<u-calendar mode="single" :show="flag.isShowDate" @confirm="confirmDate" @close="flag.isShowDate=false" :defaultDate="defaultDate" :minDate="minDate"></u-calendar>
		
		<c-nav-shengchan :switchTab="3"></c-nav-shengchan>
		 
		 
	</view>
</template>

<script> 
		 
	export default {
		data() {
			return {
				page:'',
				title:'',
				isLogin:false,
				userInfo:uni.getStorageSync('userInfo'),
				systemInfo:getApp().globalData.systemInfo,
				isIphoneX:getApp().globalData.isIphoneX,
				loadingState:{
					default:true,
					loading:false,
					completed:false
				},
				list:[], 
				type:'-1',
				warn_level:'',
				isShowSearch:false,
				currentIndex:'',
				params:{ 
					keyword:'',
					device_id:'',					 
					status: '-1',
					lag_time:'',					 
					page:1,
					limit:15,
					opt_remark:''
				},
				flag: {
					isFullPage: false,
					isSetDate: false, 
					isShowDate:false,
					isDisagree:false
				
				},  
				isStop:true, 
				isNotAuth:false,
				defaultDate:[],
				minDate:''
			}
		},
		async onLoad(params) { 
			this.page=params.page;
			this.isLogin=await this.$loginState('check');  
			if(this.page=='list'){
				this.title="设备管理列表"
			}
			if(this.isLogin){ 
				this.getList();   
			}
		},
		onShow() {
			 
		},
		onReachBottom(){
			if(this.loadingState.completed){ 
				this.params.page=1;
				return false
			}else{
				if(this.list.length<this.total&&this.list.length>0){
					this.params.page++; 
					this.getList(); 
				} 
			}	 
		},
		methods: { 
			async shenpi(idx){
				console.log(idx)
				// let res=await this.$api.user_api.devneedchangestatusal({
				// 	id
				// })
			},
			
			// 切换类型
			changeType(type){
				this.params.status=type;
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				};
				this.list=[];
				this.params.page=1;
				this.getList();
			},
			  
			async getList() {  
				let {keyword,page,limit}=this.params;
				let res = await this.$api.user_api.scireportlist({ 
					page,
					limit,
					keyword, 					
				});    
				console.log(res)
				if (res.data.code == 200) { 
					this.loadingState.default=false;					 
					this.total = res.data.data.count;  
					this.isNotAuth=false;
					if(this.userInfo.id==23){ 
						let ids=[];
						res.data.data.list.forEach(item=>{
							if(item.status==0){
								ids.push(item.id)
							}						
						})
						if(ids.length>0){
							this.devneedchangestatusal(ids);
						}						
					}					
					this.list =this.list.concat(res.data.data.list);  
					if(this.list.length<res.data.data.count){
						// this.loadingState.loading=true;
					}else{
						// this.loadingState.loading=false;
						this.loadingState.completed=true;
					}					
				} else {
					this.loadingState.default=false;
					this.isNotAuth=true;
					uni.showToast({
						icon:'none',
						title:res.data.msg,
						mask:true
					})
				} 				
			},
			
			async confirmOrder(type,idx,status){
				let _this=this;
				let item=this.list[idx];
				let msg='';
				if(type==1){
					msg='确认需求吗？'
				}
				if(type==2){
					msg='确认完成吗？'
				} 
				if(type==3){
					if(this.params.opt_remark==''){
						uni.showToast({
							icon:'none',
							title:'请输入拒绝原因',
							mask:true
						})
						return
					}		
					let d_res=await _this.$api.user_api.devneedchangestatusal({
						id:item.id,
						status:status,
						opt_remark:this.params.opt_remark
					}) 
					if(d_res.data.code==200){
						_this.list[idx].status=status;
						this.showPopup('hide');
					}
				}else{
					uni.showModal({
						content:msg,
						async success(res) {
							if(res.confirm){
								let d_res=await _this.$api.user_api.devneedchangestatusal({
									id:item.id,
									status:status
								}) 
								if(d_res.data.code==200){
									_this.list[idx].status=status;
								}
							}
						}
					})
				}
				
				
			},
			
			
			async devneedchangestatusal(ids){
				console.log(ids)
				let res=await this.$api.user_api.devneedchangestatusal({
					id:ids,
					status:1
				})
				if(res.data.code==200){
					this.list.forEach(item=>{
						item.status=1;
					})
				}
				console.log('修改状态',res)
			},
		
			lagTime(type,idx){				
				let item=this.list[idx]; 
				this.currentIndex=idx;
				this.params.lag_time=item.lag_time?item.lag_time:item.delivery_time;	 
				let currentDate=this.params.lag_time.split(' ')[0];
				if(currentDate[8]==0){
					currentDate=currentDate.substr(0,7)+currentDate.substr(9,1);
				} 
				this.minDate=currentDate;
				this.defaultDate.push(this.minDate); 
				this.showPopup('show','isSetDate');
			},
			
			confirmDate(e){
				this.params.lag_time=e[0];
				this.flag.isShowDate=false;				
			},
			
			// 搜索关键词
			search() {
				this.isShowSearch=false;
				this.list = [];
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				};
				this.params.page=1;
				this.getList();
			},
			
			 
			async submit(){
				let _this=this;   
				
				if(this.isStop){
					this.isStop=false; 
					console.log({
						id:this.list[this.currentIndex].id,
						status:5,
						lag_time:this.params.lag_time, 
						type:1,
					})
					let res = await this.$api.user_api.devneededit({
						id:this.list[this.currentIndex].id,
						status:5,
						lag_time:this.params.lag_time, 
						type:1,
					}); 
					 console.log(res)
					if (res.data.code == 200) {
						this.$showToast({
							icon:'success',
							title:'延期成功',
							duration:1000,
						}).then(()=>{
							this.list = [];
							this.getList();
							this.showPopup('hide');
						})
						this.isStop=true; 
					} else {
						this.$showToast({
							icon:'error',
							title:res.data.msg,
						}) 
						this.isStop=true; 
					} 
					
				}
				
			},
			
			// 清空关键词
			clearKeyword() {
				this.params.project_name = '';
				this.params.page=1;
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				};
				this.list = [];
				this.getList();
			},
			
			// 打开弹窗
			showPopup(t, n) { 
				if (t == 'show') {
					this.flag.isFullPage = true;
					this.flag[n] = true;
				} else if (t == 'hide') {
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}
			},
			 
			async del(id){
				let res=await this.$api.user_api.scireportdel({
					id:id
				})   
				if(res.data.code==200){
					this.loadingState={
						default:true,
						loading:false,
						completed:false
					};
					this.list = [];
					this.getList();
				}
			} 
		
		},
		computed:{ 
			list_update(){
				return this.$store.state.xq_update
			} 
		},
		watch:{
			list_update(newer,older){  
				if(newer!=older){ 
					this.loadingState={
						default:true,
						loading:false,
						completed:false
					};
					this.params.page=1;
					this.list=[];
					this.getList(); 
				}
			}
			 
		}
		
	}
</script>

<style lang="less">
	.total{
		margin:0 30rpx 0;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.project-list{
		padding-top:20rpx;		
		.item{ 
			margin: 0 0 20rpx; 
			padding: 20rpx;
			background: #fff;
			.hd{
				padding:15rpx 0; 
			}
			.date{
				color:#999;
				font-size: 24rpx;
			}
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;						
				.name{
					margin-right: 10rpx;
					font-size: 30rpx;
				}
				.status{
					flex-shrink: 0;
					text{
						border-radius: 5rpx;
						padding:2rpx 5rpx;
					}
				}
				.blue{
					border:1rpx solid #09f;
					color:#09f;
				}
				.red{
					border:1rpx solid #f00;
					color:#f00;
				}
				.grey{
					border:1rpx solid #ccc;
					color:#ccc;
				}
				.orange{
					border:1rpx solid #ff9600;
					color:#ff9600;
				}
				.green{
					border:1rpx solid green;
					color:green;
				}
			}
			.content{
				position: relative;
				padding:20rpx 0 0;
				.finish-icon{
					position: absolute;
					right:0;
					top:0;
					width:180rpx;
					image{
						width: 100%;
					}
				}
				.row-2{
					display: flex;
					justify-content: space-between;
				}
				.s-item{
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					font-size: 26rpx;
					color:#666;
					.label{
						width: 130rpx;
						flex-shrink: 0;
					}
					.val{
						display: flex;
						align-items: center;
						flex-grow: 2;
					}
				}
				.progress{
					position: relative;
					height:10rpx;
					width: 60%;
					margin-right: 20rpx;
					border-radius: 15rpx;
					background: #ccc;
					.kd{
						position: absolute;
						left:0;
						top:0;
						height:10rpx;
						border-radius: 15rpx;
						background: #09f;
					}
				}
				.progress-data{
					font-size: 28rpx;
				}				
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				// padding:20rpx 0;
				margin-top: 10rpx;
				border-top: 1rpx solid #eee;
				.left{
					display: flex;
					.btn{
						margin-right: 20rpx;
					}
				}
				.right{
					display: flex;
					justify-content: flex-end;
					.btn{
						margin-left: 20rpx; 
					}
				}
				.btn{ 
					padding:0 10rpx;
					margin: 20rpx 0;
					border-radius: 10rpx;
					font-size: 28rpx;
					color:#fff;
				}
				.blue{
					background:#09f; 
				}
				.red{
					background:#f00; 
				}
				.grey{
					background:#ccc; 
				}
				.yello{
					background:#00ff00;
				}
				.green{
					background:#00aa00;
				}
				.orange{
					background: #ff9600;
				}
			}
		}
	} 
	
	.project-list-2{
		padding-top:20rpx;
		.item{
			padding:0 20rpx;
			margin: 0 30rpx;
			background: #fff; 
			border-radius: 15rpx;
			.hd{
				padding:15rpx 0; 	
			}
			.date{
				color:#999;
				font-size: 24rpx;
			}
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;						
				.name{
					margin-right: 10rpx;
					font-size: 30rpx;
				}
				.status{
					flex-shrink: 0;
					text{
						border-radius: 5rpx;
						padding:2rpx 5rpx;
						font-size: 28rpx;
					}
				}
				.blue{ 
					color:#09f;
				}
				.red{
					border:1rpx solid #f00;
					color:#f00;
				}
				.grey{
					border:1rpx solid #ccc;
					color:#ccc;
				}
				.orange{
					border:1rpx solid #ff9600;
					color:#ff9600;
				}
				.green{
					border:1rpx solid green;
					color:green;
				}
			}
			.content{
				position: relative;
				padding:20rpx 0 0;
				.finish-icon{
					position: absolute;
					right:0;
					top:0;
					width:180rpx;
					image{
						width: 100%;
					}
				}
				.row-2{
					display: flex;
					justify-content: space-between;
				}
				.s-item{
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					font-size: 28rpx;
					color:#333;
					.label{
						width: 160rpx;
						flex-shrink: 0;
					}
					.val{
						display: flex;
						align-items: center;
						flex-grow: 2;
					}
				}
				.progress{
					position: relative;
					height:10rpx;
					width: 60%;
					margin-right: 20rpx;
					border-radius: 15rpx;
					background: #ccc;
					.kd{
						position: absolute;
						left:0;
						top:0;
						height:10rpx;
						border-radius: 15rpx;
						background: #09f;
					}
				}
				.progress-data{
					font-size: 28rpx;
				}				
			}
			.btn-wrap{
				display: flex; 
				.btn{
					width: 120rpx;
					height:60rpx;
					line-height: 60rpx;
					text-align: center;
					padding:0 10rpx;
					margin: 20rpx 10rpx;
					border-radius: 10rpx;
					font-size: 28rpx;
					color:#fff;
				}
				.blue{
					background:#09f; 
				}
				.blue-plant{
					border:2rpx solid #09f; 
					height:54rpx;
					line-height: 54rpx;
					color: #09f;
				}
				.red{
					background:#f00; 
				}
				.grey{
					background:#ccc; 
				}
				.yello{
					background:#00ff00;
				}
				.green{
					background:#00aa00;
				}
				.orange{
					background: #ff9600;
				}
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				// padding:20rpx 0;
				padding: 30rpx 0 20rpx;
				margin-top: 10rpx;
				border-top: 1rpx solid #eee;
				.left{ 
					width: 48%;
					.btn{
						margin-right: 20rpx;
						
					}
				}
				.right{
					width: 48%; 
					.btn{
						margin-left: 20rpx; 
					}
				}
				.order-info{
					padding:20rpx;
					background: #F5F5F5;
					border-radius: 10rpx;
				}
				.btn{ 
					height:60rpx;
					line-height: 60rpx;
					text-align: center;
					padding:0 10rpx;
					margin: 20rpx 0;
					border-radius: 10rpx;
					font-size: 28rpx;
					color:#fff;
				}
				.blue{
					background:#09f; 
				}
				.blue-plant{
					border:2rpx solid #09f; 
					height:54rpx;
					line-height: 54rpx;
					color: #09f;
				}
				.red{
					background:#f00; 
				}
				.grey{
					background:#ccc; 
				}
				.yello{
					background:#00ff00;
				}
				.green{
					background:#00aa00;
				}
				.orange{
					background: #ff9600;
				}
			}
		}
	} 
	.add-btn{ 
		position: absolute;
		
		top:11px; 
		height:20px;
		line-height: 20px;
		padding:0 5px;
		text-align: center;  
		border: 1rpx solid #09f;
		border-radius: 10rpx;
		color:#09f;
		font-size: 12px; 
	}
	.search-grid{ 
		padding:20rpx;
		.label{
			margin-bottom: 20rpx;
			font-size: 26rpx;
			font-weight: bold;
		}
	}
	.date-bar{
		display: flex;
		align-items: center;
		.date{
			border: 1rpx solid #eee;
			border-radius: 10rpx; 					
			input{
				height: 50rpx;
				line-height: 50rpx;	
				padding:0 10rpx;
				font-size: 24rpx;
			}
		}
		.line{
			margin: 0 20rpx;
		}
	}
	.status-list{
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		.item{
			position: relative;
			width: 31%;
			padding:10rpx 0;
			margin-bottom: 20rpx;
			margin-right: 10rpx;
			text-align: center;
			background: #f5f5f5;
			border-radius: 38rpx;
			font-size: 24rpx;
			.iconfont{
				position: absolute;
				right: -10rpx;
				top:-10rpx;
			}
		}
		.active{
			background: #09f;
			color:#fff;
			font-weight: bold;
		}
	}
	.company-list{
		display: block;
		.item{
			width: 100%;
		}
	}
</style>
